<form name="form" action="{$modal.href}" method="POST" class="nyroModal">
{include file="$MODULES_DIR/backoffice/templates/block/modal/ModalTitle.html" title=$modal.label}
    <div id="modalContent">
        <div id="modalTabs">
        <ul>
            <li><a class="selected" href="#" title="{t}Parameters{/t}" rel="tab1"><span>{t}Parameters{/t}</span></a></li>
            <li><a href="#" title="{t}Login pad{/t}" rel="tab2"><span>{t}Login pad{/t}</span></a></li>
            <li><a href="#" title="{t}Connected pad{/t}" rel="tab3"><span>{t}Connected pad{/t}</span></a></li>
        </ul>
        </div>
        <div id="tab1" class="modalTab">
            <table class="listTable" style="text-align: center;">
                <tr>
                    {t assignTo=help}Group - To great the access to a user, you must select the groups which can login on your website and the page where he will be redirect after this login{/t}
                    <th>
                        {icon name="help.png" class="toolTip icon16" title=$help}
                    </th>
                    <th>{t}Select a group{/t}</th>
                    <th>{t}Select the redirect page{/t}</th>
                </tr>
                <tr class="multiField">
                    <td style="width: 16px">
                        <a href="javascript:void(0);" class="delField">{icon name="delete2.png"}</a>
                    </td>
                    <td>
                        <select name="form[group][]" >
                            {foreach from=$groupOptionsTab item=doc}
                            <option value="{$doc[0]}">{$doc[1]}</option>
                            {/foreach}
                        </select>
                    </td>
                    <td>
                        <select name="form[pageRedirect][]" >
                            {foreach from=$menuOptionsTab item=doc}
                            <option value="{$doc[0]}">{$doc[1]}</option>
                            {/foreach}
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <button type="button" id="addGroup" class="smallGreyButton">{t}Add group{/t}</button>
                    </td>
                </tr>
            </table>
        </div>
        <div id="tab2" style="display:none" class="modalTab">
            <table class="listTable">
                <tr>
                    {t assignTo=help}Connected Pad - The Connected pad is block which is display after the login with the main informations of the user. You can choise to display it or no. You can configure some options on the Connected Pad tab.{/t}
                    <td style="width:16px;">
                        {icon name="help.png" class="toolTip icon16" title=$help}
                    </td>
                    <td>{t}Show the connected pad{/t}</td>
                    <td>
                        <select name="form[displayConnectedPad]">
                            <option value="1">{t}Yes{/t}</option>
                            <option value="0" {if !$blockParams.displayConnectedPad}selected="selected"{/if}>{t}No{/t}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>{t}Authentification by{/t}</td>
                    <td>
                        <select name="form[loginSys]">
                            <option value="login">{t}Login{/t}</option>
                            <option value="email" {if $blockParams.loginSys == "mail"}selected="selected"{/if}>{t}Mail{/t}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>{t}Login label{/t}</td>
                    <td>
                        <input type="text" name="form[loginLabel]" value="{$blockParams.loginLabel}" class="small" />
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>{t}Display forgotten password{/t}</td>
                    <td>
                        <select name="form[displayForgottenPassword]">
                            <option value="1">{t}Yes{/t}</option>
                            <option value="0" {if !$blockParams.displayForgottenPassword}selected="selected"{/if}>{t}No{/t}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>{t}Display registration{/t}</td>
                    <td>
                        <select name="form[displayRegistration]">
                            <option value="1">{t}Yes{/t}</option>
                            <option value="0" {if !$blockParams.displayRegistration}selected="selected"{/if}>{t}No{/t}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>{t}Display Remember me{/t}</td>
                    <td>
                        <select name="form[displayRememberMe]">
                            <option value="1">{t}Yes{/t}</option>
                            <option value="0" {if !$blockParams.displayRememberMe}selected="selected"{/if}>{t}No{/t}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>{t}Login button label{/t}</td>
                    <td>
                        <input type="text" name="form[loginButLabel]" value="{$blockParams.loginButLabel}" class="small" />
                    </td>
                </tr>
            </table>
        </div>
        <div id="tab3" style="display:none" class="modalTab">
            <div class="blockParamsSubmit">
                <input type="hidden" value="{$blockParams.blockId}" name="form[blockId]"/>
                <input type="hidden" value="{$blockParams.pageId}" name="form[pageId]"/>
                <input type="hidden" value="{$blockParams.pageLang}" name="form[pageLang]"/>
            </div>
            <table class="listTable">
                <tr>
                    {t assignTo=help}CSS class - You can define an additional css class to differ login blocks{/t}
                    <td style="width:16px;">
                        {icon name="help.png" class="toolTip icon16" title=$help}
                    </td>
                    <td>{t}Set the generic CSS class{/t}</td>
                    <td>
                        <input type="text" name="form[css]" value="{$blockParams.css}" class="small" />
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>{t}Display Login{/t}</td>
                    <td>
                        <select name="form[displayLogin]">
                            <option value="1">{t}Yes{/t}</option>
                            <option value="0" {if !$blockParams.displayLogin}selected="selected"{/if}>{t}No{/t}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>{t}Display Name{/t}</td>
                    <td>
                        <select name="form[displayName]">
                            <option value="1">{t}Yes{/t}</option>
                            <option value="0" {if !$blockParams.displayName}selected="selected"{/if}>{t}No{/t}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>{t}Display Logout button{/t}</td>
                    <td>
                        <select name="form[displayLogout]">
                            <option value="1">{t}Yes{/t}</option>
                            <option value="0" {if !$blockParams.displayLogout}selected="selected"{/if}>{t}No{/t}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>{t}Lougout button label{/t}</td>
                    <td>
                        <input type="text" name="form[logoutLabel]" value="{$blockParams.logoutLabel}" class="small" />
                    </td>
                </tr>
            </table>
        </div>
{include file="$MODULES_DIR/backoffice/templates/block/modal/ModalFooter.html"}
</form>

<script type="text/javascript">
    var pageIds = "{$blockParams.pageRedirect}".split(",");
    var groupIds = "{$blockParams.group}".split(",");
{literal}

$(document).ready(function(){
    for(x in groupIds)
    {
        selectField(x, groupIds[x], pageIds[x]);
    }

    $("#addGroup").click(function(){
       addField();
    });

    $(".delField").livequery('click', function(){
        deleteField($(this).parent().parent());
    });
});

function addField()
{
    var $clone = $(".multiField:first").clone();
    $clone.insertAfter($(".multiField:last"));
}

function deleteField(field)
{
    if($(".multiField").length > 1)
    {
        $(field).remove();
    }
}

function selectField(i, groupId, pageId)
{
    if(i > 0){addField();}
    
    $(".multiField:last").children("td").children("select:first").children("option[value="+groupId+"]").attr("selected", "selected");
    $(".multiField:last").children("td").children("select:last").children("option[value="+pageId+"]").attr("selected", "selected");
}

{/literal}
</script>
